<template>
  <view class="daily-care-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <image
        class="back-icon"
        src="../../static/icons/back.png"
        @tap="goBack"
      />
      <text class="nav-title">日常护理（{{ customerName }}）</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-wrapper">
      <input
        class="search-input"
        v-model="searchKey"
        placeholder="搜索护理项目名称"
        confirm-type="search"
      />
      <image
        class="search-icon"
        src="../../static/icons/search.png"
      />
    </view>

    <!-- 项目卡片列表 -->
    <!-- 父组件模板 -->
    <scroll-view class="card-list" scroll-y>
      <ProjectCard
        v-for="proj in filteredProjects"
        :key="proj.projectId"
        :project="proj"
        :customer-id="customerId"
        :customer-name="customerName"
      />
    </scroll-view>


   <!-- 底部 TabBar -->
   <view class="tab-bar">
     <view
       class="tab-item"
       :class="{ active: currentTab === 'daily' }"
       @tap="switchTab('daily')"
     >
       <image
         :src="currentTab === 'daily' 
           ? '../../static/icons/home-active.png' 
           : '../../static/icons/home.png'"
       />
       <text>日常护理</text>
     </view>
     <view
       class="tab-item"
       :class="{ active: currentTab === 'history' }"
       @tap="switchTab('history')"
     >
       <image
         :src="currentTab === 'history' 
           ? '../../static/icons/history-active.png' 
           : '../../static/icons/history.png'"
       />
       <text>护理历史</text>
     </view>
   </view>

   </view>
</template>

<script>
import ProjectCard from '@/components/Project.vue';
import { getAllProjectService } from '@/api/client';

export default {
  name: 'DailyCare',
  async onLoad(options) {
	  console.log("进入到日常护理界面");
    this.customerId = options.customerId;
    this.customerName = decodeURIComponent(options.customerName || '');
	
	// 在 onLoad 只调用，不直接写 await 逻辑
	 await this.fetchProjects();
		
  },
  components: { ProjectCard },
  data() {
    return {
		currentTab: 'daily',
      searchKey: '',
	  customerId: null,
	      customerName: '',
      // 模拟数据
      projects: [
        { projectId: 1, code: 'L-001-01', projectName: '协助服务', price: 0,    quantity: 10, status: 1 },
        { projectId: 2, code: 'M-003-04', projectName: '原房',       price: 60,   quantity: 7,  status: 2 },
        { projectId: 3, code: 'R-002-03', projectName: '测量血压', price: 0,    quantity: 8,  status: 1 },
        { projectId: 4, code: 'E-005-02', projectName: '床上洗头', price: 20,   quantity: 17, status: 2 },
        { projectId: 5, code: 'L-001-02', projectName: '健身',       price: 10,   quantity: -2, status: 3 },
		{ projectId: 3, code: 'R-002-03', projectName: '测量血压', price: 0,    quantity: 8,  status: 1 },
		{ projectId: 4, code: 'E-005-02', projectName: '床上洗头', price: 20,   quantity: 17, status: 2 },
		{ projectId: 5, code: 'L-001-02', projectName: '健身',       price: 10,   quantity: -2, status: 3 },
		{ projectId: 3, code: 'R-002-03', projectName: '测量血压', price: 0,    quantity: 8,  status: 1 },
		{ projectId: 4, code: 'E-005-02', projectName: '床上洗头', price: 20,   quantity: 17, status: 2 },
		{ projectId: 5, code: 'L-001-02', projectName: '健身',       price: 10,   quantity: -2, status: 3 }
      ]
    }
  },
  computed: {
    filteredProjects() {
      const key = this.searchKey.trim().toLowerCase()
      if (!key) return this.projects
      return this.projects.filter(p =>
        p.projectName.toLowerCase().includes(key)
      )
    }
  },
  methods: {
	 // ② 独立封装获取数据的方法
	  async fetchProjects() {
	    // 🛠️ 打印一下 customerId
	    console.log('>> fetchProjects customerId =', this.customerId);
	  
	    try {
	      const resp = await getAllProjectService(this.customerId);
	      console.log('<< 后端返回原始 resp =', resp);
	      
	      // 假设后端返回格式是 { data: [...] }
	      this.projects = resp.data;
	      
	      // 🛠️ 打印一下赋值后的列表
	      console.log('<< this.projects =', this.projects);
	    } catch (err) {
	      console.error('获取项目服务失败', err);
	      uni.showToast({ title: '加载失败', icon: 'none' });
	    }
	  },

 
	  
	  switchTab(tab) {
	      this.currentTab = tab;
	      console.log("当前选中的页面是", this.currentTab);
	  
	      if (tab === 'history') {
	        console.log("跳转到历史页面");
	        uni.navigateTo({
	          url: `/pages/careHistory/careHistory?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`
	        });

	      }
	      // tab === 'daily' 时无需跳转
	    },
    goBack() {
        uni.navigateTo({
          url: `/pages/careMenu/careMenu?customerId=${this.customerId}&name=${encodeURIComponent(this.customerName)}`
        });
      },
	

  }
}
</script>

<style scoped>
/* 整个页面容器 */
.daily-care-page {
  position: relative;
  height: 100%;
  /* 背景图只显示一次 */
  background-image: url('/static/images/background1.png');
  background-repeat: no-repeat;      /* 不平铺 */
  background-position: center top;   /* 可根据需求调整对齐 */
  background-attachment: scroll;     /* 小程序里可选 */
  background-color: #fff;         /* fallback */
}


/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  padding-top: 45px;
  /* background-color: #00c3b0; */
}
.back-icon {
  width: 24px;
  height: 24px;
}
.nav-title {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

/* 搜索框 */
.search-wrapper {
  position: relative;
  margin: 12px 16px;
}
.search-input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  border-radius: 18px;
  border: none;
  background-color: #ffffff;
  font-size: 14px;
}
.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

/* 卡片列表，留出底部导航高度 */
.card-list {
  flex: 1;
  padding-bottom: 56px;  /* 和 tab-bar 高度一致 */
  overflow: scroll;       /* 确保可以上下滚动 */
}

/* 底部 TabBar 固定 */
.tab-bar {
  position: fixed;    /* 或者 absolute，配合容器 position:relative */
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  z-index: 10;        /* 保证在最上层 */
}

.tab-item {
  flex: 1;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #888888;
  font-size: 12px;
}
.tab-item.active {
  color: #00c3b0;
}
.tab-item image {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
</style>
